// App.js

// rnc
import React, {Component} from 'react';
import {
  StyleSheet,
  Dimensions,
  ImageBackground,
  StatusBar,
  Text,
  View,
  TextInput,
  Image,
  TouchableOpacity,
} from 'react-native';

const {width, height} = Dimensions.get('screen');

const rpx = x => (width / 750) * x;

export default class App extends Component {
  bgImg =
    'https://up.enterdesk.com/edpic/82/89/77/82897774a6d21f8bade258a28a77c5c8.jpg';

  render() {
    return (
      <View>
        <ImageBackground
          blurRadius={10}
          style={{width, height}}
          source={{uri: this.bgImg}}>
          <StatusBar translucent backgroundColor="transparent" />
          {/* 防止内容与状态栏覆盖重叠 */}
          <View style={{height: StatusBar.currentHeight}} />

          <View style={{paddingHorizontal: rpx(60)}}>
            {/* 考虑: 屏幕大小变化时, 元素是否要等比例发生变化:  是 则用rpx */}
            <Text style={ss.title}>欢迎登录</Text>
            <View style={ss.input_area}>
              <Image
                source={require('./assets/user.png')}
                style={ss.input_area_icon}
              />
              <TextInput
                placeholder="请输入账号"
                placeholderTextColor="white"
                style={ss.input_area_input}
              />
            </View>
            {/* 多样式: 使用 数组 */}
            {/* 参数2 的marginTop 会覆盖 input_area 中的 marginTop 值 */}
            <View style={[ss.input_area, {marginTop: 15}]}>
              <Image
                source={require('./assets/pwd.png')}
                style={ss.input_area_icon}
              />
              <TextInput
                secureTextEntry
                placeholder="请输入密码"
                placeholderTextColor="white"
                style={ss.input_area_input}
              />
            </View>

            <TouchableOpacity activeOpacity={0.7} style={ss.login_btn}>
              <Text style={{fontSize: rpx(40), color: 'orange'}}>登录</Text>
            </TouchableOpacity>
          </View>

          {/* <View style={{paddingHorizontal: rpx(80), marginTop: 'auto'}}> */}
          <View
            style={{
              position: 'absolute',
              bottom: 40,
              left: rpx(80),
              right: rpx(80),
            }}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <View style={{backgroundColor: 'white', flex: 1, height: 2}} />
              <Text
                style={{
                  color: 'white',
                  fontSize: rpx(35),
                  marginHorizontal: 40,
                }}>
                其他登录方式
              </Text>
              <View style={{backgroundColor: 'white', flex: 1, height: 2}} />
            </View>

            <TouchableOpacity
              style={{
                alignSelf: 'center',
                // backgroundColor: 'green',
                alignItems: 'center',
                marginTop: 20,
              }}>
              <Image
                source={require('./assets/wechat.png')}
                style={{width: rpx(100), height: rpx(100)}}
              />
              <Text style={{color: 'white', fontSize: rpx(30)}}>微信登录</Text>
            </TouchableOpacity>
          </View>
        </ImageBackground>
      </View>
    );
  }
}

// 抽取 JSX 中的 样式代码
const ss = StyleSheet.create({
  login_btn: {
    backgroundColor: 'white',
    paddingVertical: 5,
    borderRadius: 100,
    alignItems: 'center',
    marginHorizontal: 10,
    marginTop: 40,
  },
  input_area_input: {color: 'white', fontSize: rpx(40), flex: 1},
  input_area_icon: {width: rpx(46), height: rpx(46), marginRight: 10},
  input_area: {
    // 超出半径最大值, 即可是圆形. 这里写 100 200 都可以
    borderRadius: 100,
    backgroundColor: 'rgba(0,0,0,0.5)',
    paddingHorizontal: 20,
    marginTop: 80,
    flexDirection: 'row',
    alignItems: 'center',
  },
  title: {
    fontSize: rpx(60),
    fontWeight: 'bold',
    color: 'white',
    textAlign: 'center',
    letterSpacing: 10, //缝隙不随屏幕大小而变化
    marginTop: 130,
  },
});
